<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程介绍</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .imgText_list ul{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .imgText_list ul li{
            flex: 0 0 50%;
            max-width: 50%;
        }
        .imgText_list ul li .imgText_list_tpList{
            display: flex;
            justify-content: space-between;
            padding:20px;
        }
        .imgText_list_tpList .imgText_list_pList{
            max-width: 200px;
            max-height: 200px;
            object-fit: cover;
        }
        .imgText_list_tpList .imgText_list_pList img{
            width: 100%;
            height: 100%;
        }
        .imgText_list .imgText_list_tpList .imgText_list_tList{
            max-width: 460px;
            padding: 15px 0 0 20px;
            color: var(--c_subtitle);
        }
        .imgText_list .imgText_list_tpList .imgText_list_tList span{
            font-size: var(--f_text);
            line-height: var(--l_text);
            display: block;
            padding-bottom: 14px;
        }
        .imgText_list .imgText_list_tpList .imgText_list_tList p{
            font-size: var(--f_describe);
            line-height: var(--l_describe);
        }
        .imgText_list .imgText_list_tpList .imgText_list_tList i{
            font-size: var(--f_subtitle_contact);
            line-height: var(--l_subtitle_contact);
            color: red;
        }
        .imgText_list ul li:hover{
            box-shadow: 0 0 20px rgba(0 0 0 / 10%);
        }
        @media screen and (max-width: 768px) {
            .imgText_list ul li{
                flex: 0 0 100%;
                max-width: 100%;
                margin-top: 20px;
            }
            .imgText_list ul li:hover{
                box-shadow:0;
            }
            .imgText_list .imgText_list_tpList .imgText_list_tList{
                padding: 0 20px;
            }
            .imgText_list ul li .imgText_list_tpList{
                padding: 0;
            }
        }
        .layout1 ul li .imgText_list_tpList{
            display: flex;
            justify-content: space-between;
            flex-direction:row;
        }
        .layout1 ul li .imgText_list_tpList:nth-child(1) .imgText_list_pList{
            order: 1;
        }
        .layout1 ul li .imgText_list_tpList:nth-child(2) .imgText_list_tList{
            order: 2;
        }
        .layout1 .imgText_list_tpList .imgText_list_tList{
            padding: 15px 20px 0 0;
        }
        @media screen and (max-width: 768px) {
            .layout1 .imgText_list ul li{
                flex: 0 0 100%;
                max-width: 100%;
                margin-top: 20px;
            }
            .layout1 .imgText_list ul li:hover{
                box-shadow:0;
            }
            .layout1 .imgText_list .imgText_list_tpList .imgText_list_tList{
                padding: 0;
            }
            .layout1 .imgText_list ul li .imgText_list_tpList{
                padding: 0;
            }
            .layout1 .imgText_list_tpList .imgText_list_tList{
                padding: 0 20px 0 0;
            }
        }
    </style>
</head>
<body>
    <div class="imgText_list modular">
        <div class="imgText_list_box public_width">
            <div class="public_title">
                <h2>课程介绍</h2>
                <p>Course description</p>
            </div>
            <ul>
                <li>
                    <a href="#" class="imgText_list_tpList">
                        <div class="imgText_list_pList">
                            <img src="../images/Text1.jpg" alt="">
                        </div>
                        <div class="imgText_list_tList">
                            <span>高级小提琴全科班</span>
                            <p>课程时长:45课时</p>
                            <p>针对每位学员的性格、爱好及不同的演奏程度，量体裁衣式的为其定 
                                制较具有针对性的科学的教学方案，使学习效率及兴趣得到较大化的提升。
                            </p>
                            <i>￥7800.00</i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="imgText_list_tpList">
                        <div class="imgText_list_pList">
                            <img src="../images/Text1.jpg" alt="">
                        </div>
                        <div class="imgText_list_tList">
                            <span>高级小提琴全科班</span>
                            <p>课程时长:45课时</p>
                            <p>针对每位学员的性格、爱好及不同的演奏程度，量体裁衣式的为其定 
                                制较具有针对性的科学的教学方案，使学习效率及兴趣得到较大化的提升。
                            </p>
                            <i>￥7800.00</i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="imgText_list_tpList">
                        <div class="imgText_list_pList">
                            <img src="../images/Text1.jpg" alt="">
                        </div>
                        <div class="imgText_list_tList">
                            <span>高级小提琴全科班</span>
                            <p>课程时长:45课时</p>
                            <p>针对每位学员的性格、爱好及不同的演奏程度，量体裁衣式的为其定 
                                制较具有针对性的科学的教学方案，使学习效率及兴趣得到较大化的提升。
                            </p>
                            <i>￥7800.00</i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="imgText_list_tpList">
                        <div class="imgText_list_pList">
                            <img src="../images/Text1.jpg" alt="">
                        </div>
                        <div class="imgText_list_tList">
                            <span>高级小提琴全科班</span>
                            <p>课程时长:45课时</p>
                            <p>针对每位学员的性格、爱好及不同的演奏程度，量体裁衣式的为其定 
                                制较具有针对性的科学的教学方案，使学习效率及兴趣得到较大化的提升。
                            </p>
                            <i>￥7800.00</i>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>